<template>
	<div class="information-shi">
		<div class="coninfor">
			<div class="infor_strod_tel"><p><i><img src="../../img-information/laba@3x.png" alt="" /></i>如果商家未能及时回复您，请电话联系</p><a :href="'tel:'+strod_tel" v-text="strod_tel">17681863432</a></div>
			<div class="conheight">
				<div class="infor_tel_height"></div>
				<div v-for="(item,index) in informationlist" class="inforlist" :class="{'text-right':item.from_id==user_infor_id}">
					
					<div v-if="item.from_id!=user_infor_id">
						<span class="touxiang"><img :src="'http://www.ntyouxuan.com/'+item.portrait"/></span>
						<div class="information-text" v-html="item.msg_img==''?biaoqing(item.content):imgguanli(item.msg_img)" @click="item.msg_img==''?'':imgzhanshi(item.msg_img)">你好，宝贝阿空教室的ask等级分ask将会大幅加多少分路况介绍的</div>
					</div>
					<div v-else>
						<div class="information-text" v-html="Number(item.goods_id)!=0?goodsxinxi(item.goods_name,item.price,item.default_image):item.msg_img==''?biaoqing(item.content):imgguanli(item.msg_img)" @click="Number(item.goods_id)!=0?goodslink(item.goods_id):item.msg_img==''?'':imgzhanshi(item.msg_img)">你好，宝贝阿空教室的ask等级分ask将会大幅加多少分路况介绍的</div>
						<span class="touxiang" ><img :src="'http://www.ntyouxuan.com/'+item.portrait"/></span>
					</div>
					<p class="datetimebox" v-show="Number(item.add_time)<Number(infordatelist[index+1])-300"><span v-text="new Date(Number(infordatelist[index+1])*1000).Format('yyyy年MM月dd日 hh:mm:ss')"></span></p>
				</div>
				<div class="jibenpadding" :class="{'tanchupadding':biaoqingshow||shangchuanshow||ruanjianpanshow}">
					
				</div>
			</div>
		</div>
		
		<div class="information-area-box">
			<div class="information-area-nav">
				<span class="information-biaobtn" @click="biaoqingtan"><img src="../../img-information/information_biaoqing@3x.png"/></span>
				<span class="information-jiabtn" @click="shancghuantan"><img src="../../img-information/information_jia@3x.png"/><input type="file" name="" id="paizhaotu" value="" accept="image/*" @change="imagetian()"/></span>
				<div contenteditable="true" readonly="readonly" class="information-textarea" @keyup="huoquzhi" @click="ruanjianpan()" @blur="quxiao()"></div>
				<span class="information-fasongbtn" @click="textarea_con&&sendinfor()">发送</span>
			</div>
			<div class="biaoqing-box" v-show="biaoqingshow">
				<span v-for="(item,index) in arclist" @click="xuanzhongbiao(index)"><img :src="item"/></span>
			</div>
			<div class="shangchuan-box" v-show="shangchuanshow">
				<p><span><img src="../../img-information/scphoto@3x.png"/></span><span>照片</span></p>
				<p><span><img src="../../img-information/paizhao@3x.png"/></span><span>相机</span></p>
			</div>
		</div>
		<imgview :imgurl="imgitem" v-if="imgitemshow" @imgfalse="imgfalsebtn"></imgview>
	</div>
</template>

<script>
	import imgview from '@/components/order-group/imgview'
	export default{
		data () {
			return{
				documenttitle:'',
				arclist:'',
				textarea_con:'',
				msg_id:'',
				store_id:'',
				user:0,
				goods_id:'',
				informationlist:[],
				infordatelist:[],
				user_infor_id:'',
				biaoqingshow:false,
				shangchuanshow:false,
				ruanjianpanshow:false,
				ajaxstute:true,
				imgitem:'',
				imgitemshow:false,
				strod_tel:''
			}
		},
		created:function() {
			this.user=localStorage.getItem("nt_user");
			if(this.$route.query.msg){
				this.msg_id=this.$route.query.msg;
			}else if(this.$route.query.goodsid){
				this.goods_id=this.$route.query.goodsid;
			}else if(this.$route.query.store_id){
				this.store_id=this.$route.query.store_id;
			}
		},
		components:{imgview},
		mounted:function(){
			var self=this;
			$.ajax({
				type:"get",
				url:furl+"index.php?app=ajax_message&act=view",
				data:{'msg_id':self.msg_id,'token':self.user,'goods_id':self.goods_id,'store_id':self.store_id},
				dataType:'json',
				success:function(res){
					if(res.done){
						self.informationlist=res.retval.replies;
						self.documenttitle=res.retval.contacts;
						window.document.title = self.documenttitle;
						self.strod_tel=res.retval.message.phone_mob;
						self.user_infor_id=res.retval.user_id_now;
						self.last_id=res.retval.last_pm_id;
						self.msg_id=res.retval.message.msg_id;
						for(var i=0;i<res.retval.replies.length;i++){
							self.infordatelist=self.infordatelist.concat(res.retval.replies[i].add_time);
						}
						
						self.scrollbotoom();
						self.longajax();
					}
				}
			});
			this.biaoqingbao();
		},
		methods:{
			imgfalsebtn:function(){
				this.imgitemshow=false;
			},
			imgzhanshi:function(imgdata){
				this.imgitem=imgdata;
				this.imgitemshow=true;
			},
			imgguanli:function(img){
				var self=this;
				var imgarr="<img src="+furl+img+" class='imgcon'>";
				
				return imgarr;
			},
			imagetian:function(){
				var self=this;
				var dataUrl=$('input[type=file]')[0].files[0];
				var reader = new FileReader();
                //读取文件过程方法
                reader.onload = function (e) {
//                  console.log("成功读取....");
                    var img=e.target.result;
                    $('input[type=file]')[0].value="";
					$.ajax({
						type:"post",
						url:furl+"index.php?app=ajax_message&act=view",
						data:{'msg_id':self.msg_id,'token':self.user,'msg_content_img':img},
						dataType:'json',
						success:function(res){
							$(".information-textarea").text('');
						}
					});
                    //或者 img.src = this.result;  //e.target == this
                }

                reader.readAsDataURL(dataUrl);
			},
			biaoqing:function(str){

				str = str.replace(/\</g,'&lt;');
			
				str = str.replace(/\>/g,'&gt;');
			
				str = str.replace(/\n/g,'<br/>');
			
				str = str.replace(/\[nt_([0-9]*)\]/g,'<img src="http://liangzhong.oss-cn-hangzhou.aliyuncs.com/activity/emoticon/$1.gif" border="0" class="icon_biao"/>');
			
				return str;

			},
			longajax:function(){
				if(this.ajaxstute){
					var self=this;
					$.ajax({
						type:"post",
						url:furl+"index.php?app=ajax_message&act=ajax_view",
						data:{'pm_id':self.msg_id,'token':self.user,'last_pm_id':self.last_id},
						dataType:'json',
						success:function(res){
							if(res.done&&res.retval.success==1){
								self.informationlist=self.informationlist.concat(res.retval.replies);
								for(var i=0;i<res.retval.replies.length;i++){
									self.infordatelist=self.infordatelist.concat(res.retval.replies[i].add_time);
								}
								self.scrollbotoom();
								self.last_id=res.retval.last_pm_id;
							}
							self.longajax();
						},
						error:function(){
							self.longajax();
						}
					});
				}
				
			},
			biaoqingtan:function(){
				this.biaoqingshow=!this.biaoqingshow;
				this.shangchuanshow=false;
				this.scrollbotoom();
			},
			shancghuantan:function(){
//				this.shangchuanshow=!this.shangchuanshow;
				this.biaoqingshow=false;
				this.scrollbotoom();
			},
			ruanjianpan:function(){
				this.shangchuanshow=false;
				this.biaoqingshow=false;
				this.ruanjianpanshow=false;
				this.scrollbotoom();
			},
			quxiao:function(){
				this.ruanjianpanshow=false;
				this.shangchuanshow=false;
				this.biaoqingshow=false;
				this.scrollbotoom();
			},
			huoquzhi:function(){
				this.textarea_con=$(".information-textarea").text();
			},
			xuanzhongbiao:function(item){
				var wwwc=$(".information-textarea").text();
				var str='[nt_'+(Number(item)+1)+']';
				$(".information-textarea").text(wwwc+str);
				this.textarea_con=$(".information-textarea").text();
			},
			scrollbotoom:function(){
				var s=setTimeout(function(){
					console.log($('.conheight').height()+$('.infor_strod_tel').height());
					$('.coninfor').scrollTop($('.conheight').height());
				},500);
				
			},
			sendinfor:function(){
				console.log(this.textarea_con);
				var self=this;
				$.ajax({
					type:"post",
					url:furl+"index.php?app=ajax_message&act=view",
					data:{'msg_id':self.msg_id,'token':self.user,'msg_content':self.textarea_con},
					dataType:'json',
					success:function(res){
						$(".information-textarea").text('');
					}
				});
			},
			biaoqingbao:function(){
				var self=this;
				$.ajax({
					type:"get",
					url:furl+"index.php?app=ajax_message&act=emoticon",
					data:{'token':self.user},
					dataType:'json',
					success:function(res){
						if(res.done){
							self.arclist=res.retval;
						}
					}
				});
			},
			goodsxinxi:function(name,price,image){
				var str="<div class='infor_goods_box'><img src="+furl+image+" class='infor_goods_image'>";
				str+="<h3 class='infor_goods_title'>"+name+"</h3>";
				str+="<span class='infor_goods_price'>"+price+"</span></div>"
				return str;
			},
			goodslink:function(goods_id){
				this.$router.push({name:'shopXQ',params:{id:goods_id}});
			}
		},
		destroyed:function () {
		    this.ajaxstute = false;
		}
	}
</script>

<style>
	.information-shi{font-size:0;height:100%;}
	.infor_strod_tel{padding-top:0.24rem;box-sizing:border-box;height:1.3rem;position:fixed;top:0;left:0;right:0;background-color:#E9FFD0;z-index: 100;font-size:0.28rem;text-align: center;line-height: 0.46rem;}
	.infor_strod_tel img{width:0.4rem;height:0.4rem;margin-right: 0.2rem;}
	.infor_tel_height{height:1.3rem;}
	.coninfor{max-height: 100%;overflow-y: scroll;overflow-x: hidden;}
	.jibenpadding{padding-bottom: 1.3rem;}
	.tanchupadding{padding-bottom: 5.8rem;}
	.inforlist{padding:0.32rem 0.32rem 0 0.32rem;}
	.touxiang{display: inline-block;width:0.86rem;height:0.86rem;text-align:center;overflow: hidden;border-radius:50%;vertical-align: top;background-color:rgba(0,0,0,0.8);}
	.touxiang>img{width:0.84rem;height:0.84rem;border-radius:50%;}
	.information-text{margin-left:0.3rem;display: inline-block;min-height:0.9rem;max-width: 4.56rem;font-size:0.28rem;color:#1c1c1c;background-color:#FFFFFF;padding:0.24rem;box-sizing: border-box;box-shadow: 0 0 0.04rem #dcdcdc;line-height: 0.4rem;border-radius: 0.04rem;position:relative;text-align: left;}
	.infor_goods_box{width:3.66rem;overflow: hidden;}
	.infor_goods_price{display: block;text-align: right;font-size:0.26rem;color:#EE4846;box-sizing: border-box;padding-right: 0.06rem;}
	.infor_goods_image{width:1.08rem;height:1.08rem;margin-right: 0.2rem;float:left;}
	.infor_goods_title{display: inline-block;width:2.34rem;height:0.76rem;font-size:0.26rem;color:#2B2B2B;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;
overflow: hidden;}
	.information-text .icon_biao{width:0.4rem;height:0.4rem;margin-left: 0.08rem;margin-right: 0.08rem;}
	.information-text .imgcon{max-width: 2.5rem;}
	.information-text:before{display: inline-block;content:'';width:0.28rem;height:0.28rem;background-color:#fff;position:absolute;top:0.32rem;left:-0.14rem;transform: rotate(45deg);-webkit-transform: rotate(45deg);box-shadow: -0.01rem 0.01rem 0.014rem #dcdcdc;}
	.text-right{text-align: right;}
	.text-right .information-text{margin-left: 0;margin-right: 0.3rem;}
	.text-right .information-text:before{right:-0.14rem;left:auto;box-shadow:  0.01rem -0.01rem 0.014rem #dcdcdc;}
	
	
	.information-area-box{position:fixed;bottom:0;left:0;right:0;background-color:#fff;z-index: 999;min-height:0.98rem;}
	.information-area-nav{min-height:0.98rem;box-sizing: border-box;padding-top: 0.2rem;padding-left: 0.29rem;padding-right: 0.3rem;}
	.information-area-nav>span{display:inline-block;vertical-align: top;}
	.information-biaobtn{margin-right: 0.18rem;}
	.information-jiabtn{margin-right: 0.2rem;position:relative;}
	.information-biaobtn>img{width:0.5rem;height:0.5rem;}
	.information-jiabtn>img{width:0.5rem;height:0.5rem;}
	.information-textarea{display:inline-block;width:4.26rem;max-height:1.2rem;border:1px solid #dcdcdc;line-height: 0.4rem;padding:0.06rem;box-sizing: border-box;font-size:0.28rem;overflow-y: scroll;-webkit-user-select:text;}
	.information-fasongbtn{font-size:0.28rem;width:1rem;height:0.6rem;background-color:#6FC452;color:#fff;line-height: 0.6rem;text-align: center;border-radius:0.1rem;margin-left: 0.22rem;}
	
	.biaoqing-box{box-sizing:border-box;height:4.6rem;border-top:1px solid #D4D4D4;padding-top:0.5rem;padding-left: 0.5rem;padding-right: 0.5rem;overflow-y: scroll;}
	.biaoqing-box>span{display: inline-block;vertical-align: top;margin-right: 0.4rem;margin-bottom: 0.3rem;}
	.biaoqing-box>span:nth-child(8n){margin-right: 0;}
	.biaoqing-box>span>img{width:0.46rem;height:0.45rem;}
	
	.shangchuan-box{box-sizing:border-box;height:4.6rem;border-top:1px solid #D4D4D4;padding-top:0.5rem;padding-left: 0.5rem;padding-right: 0.5rem;overflow-y: scroll;}
	.shangchuan-box>p{display: inline-block;vertical-align: top;width:1.3rem;text-align: center;margin-right: 0.42rem;}
	.shangchuan-box>p span:first-child{display: inline-block;width:1.2rem;height:1.2rem;vertical-align: top;border-radius:0.2rem;box-shadow: 0 0 0.08rem #D4D4D4;line-height: 1.2rem;box-sizing: border-box;}
	.shangchuan-box>p span>img{width:0.6rem;height:0.6rem;}
	.shangchuan-box>p span:last-child{display: block;font-size:0.24rem;color:#999;line-height: 0.44rem;}
	
	.datetimebox{text-align: center;margin-top: 0.3rem;}
	.datetimebox span{display: inline-block;background-color:#DCDCDC;color:#fff;padding:0.1rem 0.18rem;font-size:0.24rem;line-height: 0.24rem;}
	#paizhaotu{font-size:0;width:0.5rem;height:0.5rem;position:absolute;top:0;left:0;opacity:0;}
</style>